<template>
	<el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width:500px;margin:auto;padding-top:100px;">
		<el-form-item prop="username">
			<el-input prefix-icon="el-icon-search" v-model="form.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input prefix-icon="el-icon-search" type="password" v-model="form.password" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit" style="width:420px">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	// 哪里要用哪里就引入即可
	import axios from 'axios'
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				form: {
					username:'admin',
					password:'macro123'
				},
				rules: {
					username: [
						// 必填吗?必填，提示消息：请输入活动名称,什么时候检验:blur（失去焦点)
						{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						// 最小长度为3，最大长度为5，提示信息是。。。，什么时候检验(失焦点)
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			onSubmit() {
				// 怎么调用表单的方法
				this.$refs.form.validate((is)=>{
					if(is){
						axios.post("http://8.129.43.113:8080/admin/login",this.form)
						.then((resp)=>{
							if(resp.data.code == 200){
								// 将正确的内容保存到cookie中   Authorization
								let loginToken = resp.data.data.tokenHead+resp.data.data.token;
								Cookies.set("loginToken",loginToken);
								// 页面跳转
								this.$router.push("/home");
							}
						})
						return;
					}
				});
			}
		}
	}
</script>

<style>
</style>
